<template>
    <el-dialog v-model="open" @close="closeInfo" width="78%" align="left"
        style="position: relative;background-color: #f1f1f1;" draggable>
        <div class="mb-20 f20">
            <p>NewPurchaseOrder</p>
        </div>
        <div class="mb-10 flex">
            <div>
                <el-select v-model="pSupplierID" @focus="() => { emits('getPsupplierList'), '' }"
                        :remote-method="(val) => { emits('getPsupplierList', val) }" remote remote-show-suffix filterable  placeholder="Select supplier">
                    <el-option v-for="item in pSupplierList" :key="item.customer_info_id"
                        :label="item.firstname + item.lastname" :value="item.customer_info_id" />
                </el-select>
            </div>
            <div class="ml-20">
                <el-checkbox @change="changeNonStock" v-model="NonStock" label="Non-Stock" size="large" />
            </div>
        </div>
        <div class="w100p flex">
            <el-table :data="createList" height="340" class="clearanceTable bs">
                <el-table-column fixed prop="Model" label="Model" width="180" />
                <el-table-column prop="Brand_name" label="Brand" width="100" />
                <el-table-column prop="lead" label="LeadingTime" width="160">
                    <template v-slot="lead">
                        <el-select v-model="lead.row.lead">
                            <el-option v-for="item in leadingList" :key="item" :label="item" :value="item" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="Qtynumber" label="Qty" />
                <el-table-column prop="Price" label="Price" />
                <!-- <el-table-column prop="stock_number" label="Inventory" width="100" /> -->
                <el-table-column prop="use_number" label="Available" width="100" />
                <!-- <el-table-column prop="occupy_number" label="Occupy" width="100" /> -->
                <el-table-column label="Total">
                    <template v-slot="Total">
                        <el-input disabled v-model="Total.row.Total" />
                    </template>
                </el-table-column>
                <el-table-column label="采购数">
                    <template v-slot="Pquantity">
                        <el-input @input="inputPqty"
                            :disabled="Pquantity.row.Qtynumber == 0 || Pquantity.row.Qtynumber < 0 ? true : false"
                            v-model="Pquantity.row.Pquantity" />
                    </template>
                </el-table-column>
                <el-table-column label="采购价">
                    <template v-slot="Pmoney">
                        <el-input @input="inPmoney" v-model="Pmoney.row.Pmoney" />
                    </template>
                </el-table-column>

                <el-table-column prop="" label="Profits %" width="120">
                    <template v-slot="Profits">
                        <el-input disabled :value="Profits.row.Profits == 'Infinity' ? 0 : Profits.row.Profits" />
                    </template>
                </el-table-column>
                <el-table-column v-if="!NonStock" label="NonStock" width="120">
                    <template v-slot="NonStock">
                        <el-checkbox @change="() => { emits('changeNonStock1', NonStock.row) }"
                            v-model="NonStock.row.NonStock" label="Non-Stock"
                            :disabled="NonStock.row.use_number == 0 ? true : false" size="large" />
                    </template>
                </el-table-column>
                <el-table-column v-if="!NonStock" label="走库房数">
                    <template v-slot="WarehouseNumber">
                        <el-input
                            :disabled="WarehouseNumber.row.NonStock || WarehouseNumber.row.use_number == 0 ? true : false"
                            @input="() => { emits('changKufang', WarehouseNumber.row) }"
                            v-model="WarehouseNumber.row.WarehouseNumber" />
                    </template>
                </el-table-column>
                <el-table-column v-if="!NonStock" label="库房价格">
                    <template v-slot="stock_price">
                        <el-input disabled v-model="stock_price.row.stock_price" />
                    </template>
                </el-table-column>
                <el-table-column v-if="!NonStock" label="库Profits %" width="120">
                    <template v-slot="stockProfits">
                        <el-input disabled
                            :value="stockProfits.row.stockProfits == 'Infinity' ? 0 : stockProfits.row.stockProfits" />
                    </template>
                </el-table-column>

                <el-table-column align="center" fixed="right" label="Operation" width="150">
                    <template v-slot="operation">
                        <el-button @click="() => { delecteTacke(operation) }"
                            style="width: 60%;background-color:#6193D2;color: #fff;border: none;"
                            type="danger">delete</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="CreatePurchaseOrder" type="primary"
                    style="border:1px solid #6193D2;color:#ffffff">Save</el-button>
                <el-button style="border:1px solid #6193D2;background-color:#ffffff;color:#6193D2"
                    @click="closeWindow">Cancel</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { ref } from 'vue'
const open = ref(false)
const NonStock = ref(false)
const pSupplierID = ref('')
const emits = defineEmits(['getPsupplierList','inputPqty', 'inPmoney', 'CreatePurchaseOrder', 'changeNonStock', 'changeNonStock1', 'delecteTacke', 'changKufang'])
const dialogopen = () => {
    open.value = true
}
const closeInfo = () => {
    NonStock.value = false
    pSupplierID.value = ''
}
const closeWindow = () => {
    pSupplierID.value = ''
    NonStock.value = false
    open.value = false
}
const inputPqty = () => {
    emits('inputPqty', NonStock)
}
const inPmoney = () => {
    emits('inPmoney')
}
const CreatePurchaseOrder = () => {
    emits('CreatePurchaseOrder', NonStock.value, pSupplierID.value)
}
const changeNonStock = () => {
    emits('changeNonStock', NonStock.value)
}
const delecteTacke = (row) => {

    emits('delecteTacke', row)
}
const props = defineProps({
    createList: Object,
    leadingList: Object,
    pSupplierList: Object
})
defineExpose(
    {
        open,
        dialogopen,
        pSupplierID,
    }
)
</script>
<style lang="less">
.clearanceTable {
    border-radius: 20px;
    border: 1px solid #E7E9EA;
}

// .el-input__inner {
//     font-family: 'swis';
// }

.button_width {
    width: 80px;
}

.el-dialog__title {
    font-weight: bold;
}

.el-dialog__footer {
    margin-top: 10px;
}

.el-dialog__body {
    padding-top: 5px;
}
</style>